<template>
  <div class="login-container">
    <div class="login-header">
      <h1>仓储管理系统</h1>
      <h2>Warehouse Management System</h2>
    </div>
    <div class="login-fields" :model="form">
      <input type="text" v-model="form.user_Account" placeholder="请输入用户名" />
      <input type="password" v-model="form.user_Password" placeholder="请输入登录密码" show-password />
      <button class="login-button" @click="login">登录</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
//跳转
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter';
import axiosHelper from '../components/AxiosRequest/axiosHelper'

const counter = useCounterStore();

const router = useRouter()

const form = reactive({
  user_Account: '',
  user_Password: ''
})

const login = () => {
  axiosHelper.readAxios('http://localhost:5115/api/Login/LoginAsync', {
    method: 'post',
    data: form
  }).then(res => {
    if (res.data.code == 200) {
      console.log(res)
      counter.currentUser.user_Id = res.data.data.user_Id
      counter.currentUser.user_NickName = res.data.data.user_NickName
      counter.currentUser.user_Token = res.data.data.user_Token


      // 登录成功，写JWT的 token到本地
      window.localStorage.setItem("token", res.data.data.token);
      // 数据提交后端要加入新的Token值
      axios.defaults.headers.common["Authorization"] =
        "Bearer " + res.data.token;
      router.push('/BasicInformation/BasicView')
    }
    else {
      ElMessage.error('登录失败')
    }

  })
}
</script>

<style scoped>
.login-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('background-image-url');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  font-size: 2.5rem;
}

.login-header h2 {
  font-size: 1.5rem;
}

.login-fields {
  display: flex;
  gap: 15px;
}

.login-fields input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: none;
  width: 200px;
}

.login-button {
  cursor: pointer;
  background-color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 1.2rem;
}

.login-button:hover {
  background-color: #f0f0f0;
}
</style>